<template>
    <div>
        <p>首页111</p>
        <NuxtLink to="/users-admin/1">管理员页面</NuxtLink>
        <br/>
        <NuxtLink to="/parent/child">嵌套路由</NuxtLink>
        <AppFooter/>
        <BaseFooButton>23112312</BaseFooButton>
        <div>{{ JSON.parse(todos) }}</div>
        <br/>
        <!--组件懒加载-->
        <LazyMountainsList v-if="show"/>
        <LazyUserInfo v-if="show"/>
        <button v-if="!show" @click="show = true">Show List</button>
        <p class="a">{{ myVal }}</p>
        <p>{{ MyName }}</p>
        <img src="~/assets/image/post.jpg"/>
    </div>
</template>

<script setup>
import {ref, computed} from "vue"
import useStore from '~~/store';
// 页面缓存
definePageMeta({
    keepalive: true
})
import {NuxtLink, LazyMountainsList, LazyUserInfo} from '#components'

const show = ref(false)
const store = useStore();
const MyName = store.name;
// SSR接口
const config = useRuntimeConfig();
const {data: todos} = await useFetch('/api/conf', {baseURL: config.public.apiBase})
console.log(`store===>`, store.doubleCount)
// Math.ceil(Math.random()*10

const myVal = computed(() => Math.ceil(Math.random() * 10));
</script>

<style lang="scss" scoped>
.a {
    color: red;
}
</style>
